<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>分享有礼</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/weui.css" />
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/cardshareali.css" />
    <script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
    <script src="__STATIC_URL__/static/mobile/js/weui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC_URL__/static/js/jquery.qrcode.min.js"></script>
    <meta name="Alipay:link" content="{$share['data']['link']}"/>
</head>
<style type="text/css">
    body{

        background: #F8F8F8;
    }
    .weui-cells:after{
         border-bottom: 0;
    }

</style>
<body>
<div id="shareCard">
<div class="container" id="container">
    <div class="share-box" style="">
        <img src="__STATIC_URL__/static/mobile/images/white-bg.png" alt=""class="bg-white">
        <div class="share-content" style="">
            <div class="store-box">
                <img src="{$card['logo_url_abs']}" alt=""class="store-logo">
            </div>
            <div class="store-info">
                <p class="name">
                    <img src="__STATIC_URL__/static/mobile/images/VIP-green.png" alt=""class="icon-name icon">
                    <span class="name-text">{$card['card_show_name']}</span>
                </p>
                <p class="address">
                    <img src="__STATIC_URL__/static/mobile/images/address-gray.png" alt=""class="icon-address icon">
                    <span class="address-text"></span>
                </p>
            </div>
            <img src="__STATIC_URL__/static/mobile/images/arrow-down.png" alt=""class="arrow-icon">
            <div class="code-box"style="width:210px;height:210px;">
                <img src="__STATIC_URL__/static/mobile/images/code-circle.png" alt=""class="code-circle">
                <div id="qrcode"class="code-img">

                </div>
            </div>
            <p class="code-text">扫一扫也可直接成为会员哟~</p>
        </div>
        <div class="button-box">
            <button class="card-btn">邀请好友</button>
        </div>
    </div>

    <!--<div class="weui-panel weui-panel_access">-->
        <!--<div class="page__bd">-->
            <!--<div class="weui-cells__title">分享卡券</div>-->
            <!--<div class="weui-cells">-->
                <!--<a href="{}" class="weui-media-box clickself weui-media-box_appmsg" data-share="{}"  data-id="{}">-->
                    <!--<div class="weui-media-box__hd">-->
                        <!--<img class="weui-media-box__thumb" src="{}" alt="">-->
                    <!--</div>-->
                    <!--<div class="weui-media-box__bd">-->
                        <!--<h4 class="weui-media-box__title">{}</h4>-->
                    <!--</div>-->
                <!--</a>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->

</div>
    
    <div class="mask">
        <img src="__STATIC_URL__/static/mobile/images/share_card.png" alt=""class="share_img">
    </div>
</div>
</body>
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.0/alipayjsapi.min.js"></script>

<script>
    $(function(){
            $(".card-btn").click(function(){
                $(".mask").css("display","block");
            });
            $(".mask").click(function(){
                $(".mask").css("display","none");
            })
        })
</script>
<script>
    $(function(){

            jQuery('#qrcode').qrcode({
                render: "canvas", //也可以替换为table
                width: 190,
                height: 190,
                text: "{$info.share_url}"
            });





       $('canvas').attr("id","cvs");
    });

//        function convertCanvasToImage(canvas) {
//            //新Image对象，可以理解为DOM
//            var image = new Image();
//            // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
//            // 指定格式 PNG
//            var cvs = document.getElementById('cvs');
//            console.log(cvs);
//            image.src = canvas.toDataURL("image/png");
//            return image;
//        }
//
//        //获取网页中的canvas对象
//
//        var mycanvas1=document.getElementsByTagName('canvas')[0];
//
//
//        //将转换后的img标签插入到html中
//
//        var img=convertCanvasToImage(mycanvas1);
//
//        $('#qrcode').append(img);//imagQrDiv表示你要插入的容器id
////      $("#qrcode #cvs").attr("style","display:none");


</script>
<script>
    function ready(callback) {
        // 如果jsbridge已经注入则直接调用
        if (window.AlipayJSBridge) {
            callback && callback();
        } else {
            // 如果没有注入则监听注入的事件
            document.addEventListener('AlipayJSBridgeReady', callback, false);
        }
    }
    ready(function() {
        document.querySelector('.read').addEventListener('click', function() {
            AlipayJSBridge.call("startShare", {
                //当用户选择该数组内指定的分享渠道时，仅返回渠道名，而不是真正开始自动分享
                'onlySelectChannel': ["Weibo", "ALPContact", "ALPTimeLine", "SMS", "Weixin", "WeixinTimeLine", "QQ", "QQZone","DingTalkSession", "OpenInSafari", "Favorite"]
            }, function(data) {
                console.log("当前用户点击的分享渠道名为："+data.channelName);
                //通过onlySelectChannel屏蔽掉自动分享功能后，自行调用shareToChannel接口进行单独分享
                AlipayJSBridge.call("shareToChannel", {
                    name: data.channelName,
                    param: {
                        contentType:"{$share['data']['link']}",    //选填，目前支持支持"auto",text","image","url"格式（android分享组件不支持auto）
                        title: '自定义分享的标题',
                        content: '自定义分享的内容',
                        iconUrl: 'https://zos.alipayobjects.com/rmsportal/CKajyImsyyUtTEkzEqcM.png',
                        imageUrl: 'https://zos.alipayobjects.com/rmsportal/CKajyImsyyUtTEkzEqcM.png',
                        captureScreen: false, //是否分享当前页面的截图
                        url: "{$share['data']['link']}",
//                        otherParams: {
//                            bizType: '申请的值',//吱口令独有参数
//                            btn2: '去看看',//吱口令独有参数
//                            btn2A: 'http://www.alipay.com'//吱口令独有参数
//                        } //特定分享渠道的扩展参数
                    }
                }, function(result) {
                    console.log(result)
                });
            });
        });
    });
</script>
</html>